var main_vm = new Vue({
    el: 'main',
    data: {
        keywords: null,
        query: null,
        list: [],
        total: null,
        current_page: 1,
        last_page: 1,
        current_id: null,
        formData: {
            name: null,
            description: null
        },
        selectedList: [],
        checkList: [],
        selectAll: false,
        turn_page: 1
    },
    computed: {
        token() {
            return localStorage.token || Cookies.get('token')
        }
    },
    watch: {
        list() {
            this.checkList = []
            if (this.list.length) {
                for (var i = 0; i < this.list.length; i++) {
                    this.checkList.push(this.list[i].id)
                }
            }
        },
        selectAll(val) {
            if (val) {
                this.selectedList = this.checkList
            } else {
                if (this.selectedList == this.checkList) {
                    this.selectedList = []
                }
            }
        },
        selectedList() {
            this.selectedList.length == this.checkList.length ? this.selectAll = true : this.selectAll = false
        },
        keywords(val) {
            if (val == "" || val == null) {
                this.query = null
            }
        }
    },
    methods: {
        getList() {
            var self = this
            axios.get(window.config.host + '/departments', {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    params: {
                        name: this.query,
                        page: this.current_page
                    }
                })
                .then(function(res) {
                    console.log(res)
                    if (res.status == 200) {
                        self.list = res.data.data.data
                        self.total = res.data.data.total
                        self.current_page = res.data.data.current_page
                        self.last_page = res.data.data.last_page
                    } else {
                        alert(res.data.message)
                    }
                })
                .catch(function(res) {

                })
        },
        search() {
            this.query = this.keywords
            this.current_page = 1
            this.getList()
        },
        addDepartment() {
            var target = event.currentTarget
            $(target).button('loading');
            var self = this
            axios.post(window.config.host + '/departments', this.formData, {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
                .then(function(res) {
                    console.log(res)
                    if (res.status == 200) {
                        alert('添加成功')
                        $('#modal-form').modal('hide')
                        self.getList()
                    } else {
                        alert(res.data.message)
                    }
                })
                .catch(function(err) {

                })
                .then(function() {
                    $(target).button('reset');
                })
        },
        openEdit(item) {
            this.current_id = item.id
            this.formData = {
                name: item.name,
                description: item.description
            }
            $('#modal-form').modal('show')
        },
        editDepartment() {
            var target = event.currentTarget
            $(target).button('loading');
            var self = this
            axios.put(window.config.host + '/departments/' + this.current_id, this.formData, {
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    }
                })
                .then(function(res) {
                    console.log(res)
                    if (res.status == 200) {
                        alert('修改成功')
                        $('#modal-form').modal('hide')
                        self.getList()
                    } else {
                        alert(res.data.message)
                    }
                })
                .catch(function(err) {

                })
                .then(function() {
                    $(target).button('reset');
                })
        },
        submitForm() {
            this.current_id ? this.editDepartment() : this.addDepartment()
        },
        modalInt() {
            var self = this
            $('#modal-form').modal({
                show: false
            })

            $('#modal-form').on('hide.bs.modal', function(e) {
                self.current_id = null
                self.formData = {
                    name: null,
                    description: null
                }
            })
        },
        pageTurn(num) {
            this.current_page = this.current_page + num
            this.getList()
        },
        toPage() {
            if (this.turn_page <= this.total) {
                this.current_page = this.turn_page
                this.getList()
            }
        }
    },
    mounted() {
        this.getList()
        this.modalInt()
    }
})